<script setup lang="ts">
import { ref,onActivated } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { useStorage } from '@/hooks/web/useStorage'
import { useRouter } from 'vue-router'
import { editUsers } from '@/api/user'
import { useValidator } from '@/hooks/web/useValidator'
import { areaList } from '@vant/area-data'
import { getAddressJd, saveTask } from '@/api/task'
import moment from 'moment'
const appStore = useAppStore()
const { setStorage } = useStorage()
const { back } = useRouter()
const userInfo = ref(appStore.getUserInfo)
onActivated(() => {
  userInfo.value = appStore.getUserInfo
})
interface taskFormType {
  staffId: string
  merPhone: string
  merName: string
  addressHead: string
  addressJd: string
  address: string
  remark: string
  machineSnCode: string
  callTime: string //上门时间
  addressHeadCode: string
}
const taskForm = ref<taskFormType>({
  staffId: '',
  merPhone: '',
  merName: '',
  addressHead: '',
  address: '',
  remark: '',
  machineSnCode: '',
  callTime: '',
  addressHeadCode: '',
  addressJd: ''
})
const { isMobilePhone, isEmail } = useValidator()
const onSubmit = (values: any) => {
  saveTask({ staffId: userInfo.value.id, ...values }).then((res) => {
    // appStore.setUserInfo(res.data)
    // setStorage('userInfo', res.data)
    onBack()
  })
}
const onBack = () => {
  back()
}

const showAreaPicker = ref(false)
const showStreetPicker = ref(false)
const streetColumns = ref([])

const confirmArea = (val: any) => {
  console.log(val)
  showAreaPicker.value = false
  taskForm.value.addressHead = val.selectedOptions
    .map((e: any) => {
      return e.text
    })
    .toString()
  taskForm.value.addressHeadCode = val.selectedValues[2]
  getAddressJd(val.selectedValues[2]).then((res) => {
    streetColumns.value = res.data
    showStreetPicker.value = true
  })
}

const handleShowStreetPicker = () => {
  if (streetColumns.value.length > 0) {
    showStreetPicker.value = true
  } else {
    showAreaPicker.value = true
  }
}
const confirmStreet = (val: any) => {
  console.log(val)
  showStreetPicker.value = false
  taskForm.value.addressJd = val.selectedOptions[0].name
}

const showTimePicker = ref(false)
const currentDate = ref<string[]>([])
const currentTime = ref<string[]>([])
currentDate.value = moment().format('YYYY-MM-DD').split('-')
currentTime.value = moment().format('HH:mm').split(':')
const confirmTime = () => {
  showTimePicker.value = false
  const date = `${currentDate.value.toString().replace(/,/g, '/')} ${currentTime.value
    .toString()
    .replace(/,/g, ':')} `
  taskForm.value.callTime = moment(date).format('YYYY-MM-DD HH:mm')
}
</script>

<template>
  <van-nav-bar title="添加任务" fixed placeholder left-arrow @click-left="onBack"> </van-nav-bar>
  <div class="wrapper">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="taskForm.merName"
          name="merName"
          label="姓名"
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field
          v-model="taskForm.merPhone"
          name="merPhone"
          label="电话"
          :rules="[
            { required: true, message: '请输入电话' },
            { validator: isMobilePhone, message: '请输入正确的手机号' }
          ]"
        />
        <van-field
          v-model="taskForm.addressHead"
          name="addressHead"
          label="省市区"
          readonly
          @click="showAreaPicker = true"
          :rules="[{ required: true, message: '请选择省市区' }]"
        />
        <van-popup v-model:show="showAreaPicker" position="bottom">
          <van-area
            title="选择"
            :area-list="areaList"
            @cancel="showAreaPicker = false"
            @confirm="confirmArea"
          />
        </van-popup>
        <van-field
          v-model="taskForm.addressJd"
          name="addressJd"
          label="街道"
          readonly
          @click="handleShowStreetPicker"
          :rules="[{ required: true, message: '请选择街道' }]"
        />
        <van-popup v-model:show="showStreetPicker" position="bottom">
          <van-picker
            title="选择"
            :columns="[streetColumns]"
            :columns-field-names="{
              text: 'name',
              value: 'code'
            }"
            @cancel="showStreetPicker = false"
            @confirm="confirmStreet"
          />
        </van-popup>
        <van-field
          v-model="taskForm.address"
          name="address"
          label="详细地址"
          :rules="[{ required: true, message: '请输入详细地址' }]"
        />
        <van-field
          v-model="taskForm.callTime"
          name="callTime"
          label="上门时间"
          readonly
          @click="showTimePicker = true"
          :rules="[{ required: true, message: '请选择上门时间' }]"
        />
        <van-popup v-model:show="showTimePicker" position="bottom">
          <van-picker-group
            title="上门时间"
            :tabs="['选择日期', '选择时间']"
            @confirm="confirmTime"
            @cancel="showTimePicker = false"
          >
            <van-date-picker v-model="currentDate" />
            <van-time-picker v-model="currentTime" />
          </van-picker-group>
        </van-popup>

        <van-field
          v-model="taskForm.machineSnCode"
          name="machineSnCode"
          label="机具编号"
          :rules="[{ required: true, message: '请输入机具编号' }]"
        />
        <van-field v-model="taskForm.remark" name="remark" label="备注" type="textarea" />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<style lang="less" scoped>
.wrapper {
  padding: 16px 0;
}
.btnBox {
  padding: 32px 16px;
}
</style>
